<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :showTop="false"
    :dark="loaded ? false : true"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
  >
    <view class="menu-background" v-if="showMenuBg"></view>
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <scroll-view
        class="scroll"
        @scroll="watchScrollWrapper"
        scroll-with-animation
        :scroll-into-view="scrollIntoViewId"
        scroll-y="true"
        style="height: 85vh"
        upper-threshold="60"
      >
        <view style="posision: relative">
          <view class="major-name">{{ mymajor.name }}</view>
          <view class="major-desc"
            >{{ mymajor.educationBackground }} · {{ mymajor.majorName }} ·
            {{ mymajor.category }}
          </view>

          <view :class="[showMenuBg ? 'menu-bg' : 'menu']">
            <u-tabs
              :is-scroll="false"
              :current="currentIndex"
              name="title"
              :list="majorInfoList"
              @change="majorInfoClick"
              height="60"
              :active-item-style="activeItemStyle"
              :bar-style="barStyle"
              font-size="28"
              :bg-color="myColor"
              inactive-color="#7C8999"
              active-color="#000000"
            ></u-tabs>
          </view>
          <view class="cpn-container">
            <view
              class="scrollItemToTop"
              id="basicInfo"
              :style="{
                top: '-' + 32 + 'rpx',
              }"
            ></view>
            <BasicInfo
              v-if="positionTagId"
              id="basicInfo1"
              :positionTagId="positionTagId"
            />
            <view
              class="scrollItemToTop"
              id="schools"
              :style="{
                top: cpnsHeightList[0] - 28 + 'px',
              }"
            ></view>
            <Schools
              v-if="positionTagId"
              id="schools1"
              :positionTagId="positionTagId"
            />
            <view
              class="scrollItemToTop"
              id="jobOrientation"
              :style="{
                top: cpnsHeightList[0] + cpnsHeightList[1] - 28 + 'px',
              }"
            ></view>
            <JobOrientation
              v-if="positionTagId"
              id="jobOrientation1"
              :majorName="mymajor.name"
              :positionTagId="positionTagId"
            />
            <view
              class="scrollItemToTop"
              id="careerProspects"
              :style="{
                top:
                  cpnsHeightList[0] +
                  cpnsHeightList[1] +
                  cpnsHeightList[2] -
                  28 +
                  'px',
              }"
            ></view>
            <CareerProspects
              v-if="positionTagId"
              id="careerProspects1"
              :positionTagId="positionTagId"
              :currentRegion="currentRegion"
              @showSelectRegion="showRegionClick"
            />
          </view>
        </view>
      </scroll-view>
    </view>
    <regionSelector
      class="region-selector"
      v-if="showRegionSelect"
      :showRegionSelect.sync="showRegionSelect"
      @regionChange="regionChange"
    />
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { throttle } from "lodash";
import LoginDialog from "@/components/LoginDialog";
import BasicInfo from "./components/basicInfo";
import CareerProspects from "./components/careerProspects";
import JobOrientation from "./components/jobOrientation";
import Schools from "./components/schools";
import ShareMixin from "@/mixins/share";
import regionSelector from "@/pagesSub/careerNew/positionDictionary/components/regionSelector";
import {
  addBuryingPoint,
  addPositionTopicPoint,
  tagInfo,
  getUserInfo,
  cardRegist,
  getPersonOrDefaultCardType,
} from "@/api/modules/career";

export default {
  props: {
    major: {
      type: Object,
      default: () => {
        return {
          name: "",
          educationBackground: "",
          majorName: "",
          category: "",
        };
      },
    },
  },
  mixins: [ShareMixin],
  components: {
    BasicInfo,
    CareerProspects,
    JobOrientation,
    Schools,
    LoginDialog,
    regionSelector,
  },

  data() {
    return {
      showMenuBg: false,
      cpnsHeightList: [],
      imageUrl: "",
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      sharePath: `/pagesSub/careerNew/majorDetail/index?${this.shareQuery}`,
      shareTitle: "查一查我的专业",
      shareQuery: `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10`,
      shareCareerInfoParams: {},
      myColor: "",
      title: "",
      scrollIntoViewId: "",
      positionTagId: "",
      navHeight: getApp().globalData.navHeight,
      currentIndex: 0, // 菜单index
      majorInfoList: [
        {
          name: "基本信息",
        },
        {
          name: "开设院校",
        },
        {
          name: "就业方向",
        },
        {
          name: "就业前景",
        },
      ], // 菜单list
      barStyle: {
        width: 0,
        height: 0,
      },
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      mymajor: {},
      showRegionSelect: false,
      currentRegion: { label: "全国", value: "100000" },
      buryingPointId: "",
      cardType: "",
    };
  },
  created() {},

  mounted() {
    this.cpnsHeightList = [];
    let cpnsName = [
      "#basicInfo1",
      "#schools1",
      "#jobOrientation1",
      "#careerProspects1",
    ];
    setTimeout(() => {
      cpnsName.forEach((item) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(item)
          .boundingClientRect(({ height }) => {
            this.cpnsHeightList.push(height);
          })
          .exec();
      });
    }, 2000);
    // 如果没有登陆，就弹出登录框
    // if (!this.personId) {
    //   this.showLoginDialog();
    // }
  },
  onShow() {
    //  埋点统计访问次数
    this.addBuryingPointFn(20095, "", "", "", "");
    wx.reportEvent("major_detail_enter_click", {}); //专业详情—进入专业详情页
    this.addPositionTopicPointFn(1, this.positionTagId);
  },
  onLoad(opt) {
    console.log("opt", opt);
    this.positionTagId = opt.positionTagId;
    this.mymajor = this.major;
    this.tagInfoFn();
    let jumpPersonId = "";
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = "";
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }

    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionTagId=${this.positionTagId}`;
    this.sharePath = `/pagesSub/careerNew/majorDetail/index?${this.shareQuery}`;
    this.shareCareerInfoParams = {
      //分享参数
      etId: 20046,
      id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync("person-id").slice(2) || "0",
      cardType: this.cardType
        ? this.cardType
        : uni.getStorageSync("cardType") || this.cardType,
      consultantId: uni.getStorageSync("sellId")
        ? uni.getStorageSync("sellId")
        : "",
      originType: this.originFrom == "shareLink" ? 10 : 20,
      statType: "40",
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType,
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20080, "50", jumpPersonId, jumpSource, sourceType);
    }
  },

  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    async addPositionTopicPointFn(eventType, dataId) {
      const params = {
        eventType: eventType,
        dataId: dataId,
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        description: "中学生高考点击了专业",
        platform: "1",
      };
      const res = await addPositionTopicPoint(params);
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async loginSuccessBack() {
      console.log("------------loginSuccessBack------------>loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      wx.reportEvent("major_detail_login_consultant_click", {}); //专业详情—手机号一键登录
      await this.getUserInfoFn();
    },
    watchScroll: throttle(function (e) {
      e.detail.scrollTop = e.detail.scrollTop - 1000;
      if (e.detail.scrollTop < 100 + this.cpnsHeightList[0]) {
        // 基本信息
        this.currentIndex = 0;
      } else if (
        e.detail.scrollTop <
        100 + this.cpnsHeightList[0] + this.cpnsHeightList[1]
      ) {
        this.currentIndex = 1;
      } else if (
        e.detail.scrollTop <
        100 +
          this.cpnsHeightList[0] +
          this.cpnsHeightList[1] +
          this.cpnsHeightList[2]
      ) {
        this.currentIndex = 2;
      } else {
        this.currentIndex = 3;
      }
    }, 100),
    watchScrollWrapper: throttle(function (e) {
      console.log("e.detail.scrollTop", e.detail.scrollTop);
      if (e.detail.scrollTop > 50) {
        this.title = this.mymajor.name;
        this.showMenuBg = true;
      } else {
        this.title = "";
        this.myColor = "";
        this.showMenuBg = false;
      }
      if (e.detail.scrollTop < 75 + this.cpnsHeightList[0]) {
        // 基本信息
        this.currentIndex = 0;
      } else if (
        e.detail.scrollTop <
        75 + this.cpnsHeightList[0] + this.cpnsHeightList[1]
      ) {
        this.currentIndex = 1;
      } else if (
        e.detail.scrollTop <
        75 +
          this.cpnsHeightList[0] +
          this.cpnsHeightList[1] +
          this.cpnsHeightList[2]
      ) {
        this.currentIndex = 2;
      } else {
        this.currentIndex = 3;
      }
    }, 100),
    majorInfoClick(index) {
      this.currentIndex = index;
      switch (this.majorInfoList[index].name) {
        case "基本信息":
          this.scrollIntoViewId = "basicInfo";
          break;
        case "开设院校":
          this.scrollIntoViewId = "schools";
          break;
        case "就业前景":
          this.scrollIntoViewId = "careerProspects";
          break;
        case "就业方向":
          this.scrollIntoViewId = "jobOrientation";
          break;
        default:
          break;
      }
      setTimeout(() => {
        this.scrollIntoViewId = "";
      }, 300);
    },
    async tagInfoFn() {
      const params = {
        positionTagId: this.positionTagId || "10002",
      };
      const res = await tagInfo(params);
      if (res.code == 200) {
        this.mymajor.name = res.data.tagName;
        this.mymajor.majorName = res.data.topTag;
        this.mymajor.category = res.data.parentTag;
        this.mymajor.educationBackground =
          res.data.cateType == 30 ? "本科" : "专科";
      }
    },
    showRegionClick() {
      this.showRegionSelect = true;
    },
    /* 选择城市 */
    regionChange(region) {
      this.currentRegion = region;
    },
    async cardRegistFn() {
      const params = {
        cardKey: this.cardKey || "1", // cardType或者cardKe至少传一个
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        sellId: +this.consultantId,
      };
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn() {
      const params = { uid: "" };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        await this.getPersonOrDefaultCardTypeFn();
        if (!res.data.cardNo) {
          // 说明此时没有绑卡 要自动绑卡(这里是针对中学生的项目)
          await this.cardRegistFn();
        }
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        cardSource: "HIGH_ASSESSMENT", // 如果是默认注册是关于高考的卡，就要穿这个参数获取到cardType
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        this.cardType = res.data.cardType;
        uni.setStorageSync("cardType", res.data.cardType);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";
.banner {
  margin: 20rpx 0;
}
.menu-background {
  position: absolute;
  width: 100vw;
  background-image: url($img-base + "careerPath/myBackgroundBlue.png");
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 62rpx;
  top: 92px;
  /* z-index: 2; */
}

.wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-image: url($img-base + "careerPath/majorDetailBg.png");
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 85vh;
  padding: 0 32rpx;
  // margin-bottom: 140rpx;
  overflow: hidden;

  .scroll {
    .menu,
    .menu-bg {
      margin-top: 44rpx;
      position: sticky;
      top: 0;
      z-index: 999;
      /* border-radius: 24rpx; */

      .activeItemStyle {
        color: red;
      }

      ::v-deep .u-tab-item {
        text-align: left;
      }

      ::v-deep .u-tab-item {
        text-align: center !important;
      }
    }

    .menu-bg {
      background-image: url($img-base + "careerPath/myBackgroundBlue.png");
      background-size: 100% 832rpx;
      background-repeat: no-repeat;
    }

    .cpn-container {
      /* position: sticky;
            top: 20;
            z-index: 999; */
      margin-top: 32rpx;
      position: relative;

      .scrollItemToTop {
        position: absolute;
        visibility: hidden;
        width: 100%;
        height: 1px;
        /* top: -96rpx; */
      }
    }
  }

  .major-name {
    font-weight: bold;
    font-size: 44rpx;
    color: #000000;
  }

  .major-desc {
    margin-top: 16rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #52586d;
  }

  .content {
    height: 80vh;
  }
}
</style>
